<style src="@/css/components/table.css"></style>
<style src="@/css/components/button.css"></style>
<style src="@/css/components/form.css"></style>
<style>
.distribute-power {
    background: #fff;
    padding:0 30px 30px;
}

.distribute-power .no-border {
    border:none;
}

.distribute-power .test-papers-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    align-items: center;
}

.pages {
    margin-top: 30px;
}

.el-icon-caret-top:before,.el-icon-caret-bottom:before {
    content: ""
}

.distribute-power h2 {
    font-size:16px;
    color:#3A3A63;
    height: 60px;
    border-bottom:1px solid #E1E7EB;
    margin-bottom: 30px;
    line-height: 60px;
}
</style>

<template>
    <section>
        <div class="distribute-power" style="margin-bottom:20px;">
            <h2>角色概要</h2>
            <el-form ref="form" :rules="rules" :model="form" label-width="116px">
                <el-form-item label="角色名称" prop="RoleName">
                    <el-input v-model="form.RoleName" placeholder="请输入角色名称"></el-input>
                </el-form-item>

                <el-form-item label="角色说明" prop="RoleDesc">
                    <el-input v-model="form.RoleDesc" placeholder="请输入角色说明"></el-input>
                </el-form-item>
            </el-form>
        </div>

        <div class="distribute-power">
            <h2>内容角色权限</h2>
            <el-table :data="menuList" style="width: 100%" class="newTab first-table">
                <el-table-column prop="Title" label="权限页面" min-width="20%"></el-table-column>
                <el-table-column label="功能" min-width="80%">
                    <template slot-scope="scope">
                        <el-checkbox-group v-model="scope.row.PIDArr">
                            <el-checkbox v-for="item in permissionList[scope.row.Code]" :label="item.PID" :key="item.PID">{{item.Name}}</el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="test-papers-header" style="margin-top:20px;">
            <el-button type="primary" class="showdow" @click="save">保存</el-button>
        </div>
    </section>

</template>

<script>

import qs from 'qs'

export default{
    data: function(){
        return {
            roleID:'',
            roleName:this.$route.query.roleName,
            menuList:[],
            permissionList:[],
            form:{
                RoleName:"",
                RoleDesc:""
            },

            rules: {
                RoleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur'}
                ],
                RoleDesc: [
                    { required: true, message: '请输入角色说明', trigger: 'blur'}
                ]
            },


            path:[
                {
                    'name':'设置',
                    'path':'/organization/dept-list'
                },
                {
                    'name':'角色管理',
                    'path':'/organization/role-list'
                },
                {
                    'name':'创建角色'
                }
            ]
        }
    },
    mixins: [mixinMethods],
    methods: {
        // 分配权限
        sureDistribute(){
            let nowPIDArr = []
            this.menuList.forEach(item=>{
                if(item.PIDArr.length>0){
                    nowPIDArr.push(item.PIDArr.join(','))
                }
            })

            axios.post('/com/role/setPermission', qs.stringify({
                roleID:this.roleID,
                PIDStr:nowPIDArr.join(',')
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.$message.success('分配成功')
                    history.go(-1)
                }else {
                    this.$message.error(d.msg)
                }
            })
        },
        // 保存角色
        save() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    !this.$route.query.roleID ? this.add() : this.edit()
                }
            })
        },

        // 新增角色
        add() {
            axios.post('/com/role/add', qs.stringify(this.form)).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.roleID = d.data.RoleID
                    this.sureDistribute()
                }else {
                    this.$message.error(d.msg)
                }
            })
        },

        // 编辑权限
        edit() {
            axios.post('/com/role/edit', qs.stringify({
                roleID:this.roleID,
                roleName:this.form.RoleName,
                roleDesc:this.form.RoleDesc
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.sureDistribute()
                }else {
                    this.$message.error(d.msg)
                }
            })
        },

        // 获取权限列表
        permissionFn() {
            axios.post('/com/role/permissionList', qs.stringify({roleID:this.roleID})).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    let selectObj = d.data.PermissionSelected;
                    d.data.MenuList.forEach(item=>{
                        item.PIDArr = [];
                        if(selectObj[item.Code]){
                            selectObj[item.Code].forEach(one=>{
                                item.PIDArr.push(one.PID)
                            })
                        }
                    })
                    this.menuList = d.data.MenuList;
                    this.permissionList = d.data.PermissionList;
                }else {
                    this.$message.error(d.msg)
                }
            })
        },

        // 编辑角色
        roleInfo() {
            axios.post('/com/role/roleInfo', qs.stringify({
                roleID:this.roleID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.form = d.data.RoleInfo
                    this.permissionFn()
                }else {
                    this.$message.error(d.msg)
                }
            })
        }

    },
    mounted(){
        this.$store.commit('setPath', this.path)

        console.log(this.$route.query.roleID)
        if(this.$route.query.roleID) {
            this.roleID =  this.$route.query.roleID
            this.path[this.path.length-1].name = "编辑角色"
            this.roleInfo()
        } else {
            this.permissionFn()
        }

    }
}


</script>
